<!--学员花名册-->
<template>
  <div class="wrapper-container">
    <div class='left'>
      <div class="resetSelect" >
        <span class="labelName">视图：</span>
        <el-select v-model="viewType" @change="changeView">
            <el-option v-for="item in viewsList" :key="item.value" :label="item.label" :value="item.value" ></el-option>
        </el-select>
      </div>
      <div class="tree">
        <el-tree ref="tree" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" :indent="0" lazy :load="loadNode" node-key="value"></el-tree>
        <div class="hr"></div>
      </div>
    </div>
    <div class="right">
        <div class="search-container" style="margin-top:0">
          <div class="search-container-item right87">
            <div class="item-name">姓名：</div>
            <el-input class="inputWidth" v-model="dataSForm.studentName" size="mini"></el-input>
          </div>
          <div class="search-container-item right87">
            <div class="item-name">学号：</div>
            <el-input class="inputWidth" v-model="dataSForm.studentCode" size="mini"></el-input>
          </div>
          <div class="search-container-item right87">
            <div class="item-name">年级：</div>
            <el-select v-model="dataSForm.grade" placeholder="请选择" style="width: 110px" size="mini">
              <el-option v-for="item in nj" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="search-container-item right87">
            <div class="item-name">学员队：</div>
            <el-select v-model="dataSForm.studentDui" placeholder="请选择" style="width: 110px" size="mini">
              <el-option v-for="item in duiList" :key="item.id" :label="item.deptName" :value="item.id"></el-option>
            </el-select>
          </div>
          <div class="search-container-item right87">
            <div class="item-name">审核状态：</div>
            <el-select v-model="dataSForm.auditStatus" placeholder="请选择" style="width: 110px" size="mini">
              <el-option v-for="item in auditList" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="search-container-item right87">
            <div class="item-name">培养层次：</div>
            <el-select v-model="dataSForm.trainingLevelId" placeholder="请选择" style="width: 110px" size="mini">
              <el-option v-for="item in pycc" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </div>
          <div class="search-button color-primary width70" @click="initListS">
            <img src="../../../assets/assessment/icon-search.png" alt="" />
            <span>查询</span>
          </div>
          <div class="search-button color-primary width86" @click="xfhd" v-if="roleId == '1490859421955674114'">
            <img src="../../../assets/assessment/icon-pass.png" alt="" />
            <span>下发核对</span>
          </div>
        </div>
    <div class="table-container table-css">
      <el-table :data="tableData" border style="width: 1489px" class="table-data" 
        :default-sort = "{prop: 'system', order: 'descending'}"
        max-height="620"
       :header-cell-style="{background:'#edf2f9','border-color': '#c7d7eb'}"
        @selection-change="handleSelectionChange">>
        <el-table-column type="selection" width="55" align="center"> </el-table-column>
        <el-table-column prop="courseName" label="操作" align="center" width="85">
          <div class="flex"  slot-scope="scope">
              <span class="small-btn color-primary right22" @click="seeInfo(scope.row)">
                <img src="../../../assets/assessment/icon-search.png" alt="" style="width:15px;height:15px" />
            </span>
            <span class="small-btn delete-red" @click="deleteInfo(scope.row.studentCode)"  v-if="roleId == '1490859421955674114'" >
                <img src="../../../assets/assessment/icon-delete.png" style="width:13px;height:13px" >
            </span>
          </div>
        </el-table-column>
        <el-table-column prop="courseName" label="审核状态" align="center" width="85">
          <template slot-scope="scope">
            <span v-if="scope.row.auditStats == 0">待审核</span>
            <span v-if="scope.row.auditStats == 1">已通过</span>
            <span v-if="scope.row.auditStats == 2">未提交</span>
            <span v-if="scope.row.auditStats == 3">打回</span>
          </template>
        </el-table-column>
        <el-table-column prop="grade" label="年级" sortable align="center" width="80"></el-table-column>
        <el-table-column prop="studentCode" label="学号" align="center" width="100"></el-table-column>
        <el-table-column prop="studentName" label="姓名" align="center" width="85"></el-table-column>
        <el-table-column prop="gender" label="性别" align="center" width="60"></el-table-column>
        <el-table-column prop="idCard" label="身份证号" align="center" width="180"></el-table-column>
        <el-table-column prop="specialty" label="专业" align="center" width="100"></el-table-column>
        <el-table-column prop="className" label="专业班次" align="center" width="100" ></el-table-column>
        <el-table-column prop="studentDui" label="队别" align="center" ></el-table-column>
        <el-table-column prop="trainingLevel" label="培养层次" align="center" width="90" ></el-table-column>
        <el-table-column prop="studentTypeShow" label="生源类别" align="center" width="140" ></el-table-column>
        <el-table-column prop="studentStatus" label="学籍状态" align="center" width="100" ></el-table-column>
      </el-table>
    </div>
    <div class="export-button" @click="importExcel">
        <img src="../../../assets/assessment/icon-export.png" alt="" />
        <span>导出Excel</span>
    </div>
    <div class="pagination-block">
      <el-pagination prev-text="上一页" next-text="下一页" v-if="total>50"
       :page-size="50" layout="prev, pager, next, jumper" :total="total"  @current-change="currentPage"></el-pagination>
    </div>
    </div>
  </div>
</template>

<script>
import {getFirstLevel,getZY,getZYBC,getStudentList,studentStatusAudit,deleteStudent} from "@/api/student";
import fileDownload from "js-file-download"
import { getStore } from '@/util/store.js'
import Axios from 'axios'
export default {
  data() {
    return {
      dataForm:{
        auditStatus:'',//审核状态
        trainingLevelId:'',//培养层次
        studentCode:'',//学号
        studentName:'',//学员姓名
        grade:'',//年级
        studentDui:'',//学员队
        pageNo:1,
        pageSize:50
      },
      roleId: '',
      dataSForm:{
        auditStatus:'',//审核状态
        trainingLevelId:'',//培养层次
        studentCode:'',//学号
        studentName:'',//学员姓名
        grade:'',//年级
        studentDui:'',//学员队
        pageNo:1,
        pageSize:50
      },
      lastParams:{
        grade:'',//年级
        specialty:"",//专业编号
        trainingLevelId:'',//培养层次
      },
      auditList:[
        {value:'',label:'全部'},
        {value:'0',label:'待审核'},
        {value:'1',label:'已通过'},
        {value:'2',label:'未提交'},
        {value:'3',label:'打回'},
      ],
      pycc:[],//培养层次
      nj:[],//年级
      duiList:[],//学员队
      IDS:[],//id集合
      total:1,
      viewsList:[
        {label:'培养层次+专业+年级+专业班次',value:'1'},
        {label:'培养层次+年级+专业+专业班次',value:'2'}
      ],
      viewType:'1',//试图类型
      defaultProps: {
        children: 'children',
        label: 'label',
        value:'value',
        isLeaf:'leaf'
      },
      tableData: [],
      treeData:[],
    };
  },
  created() {
    const userInfo = getStore({
      name: "userInfo",
      debug: true,
    }) || {}
    this.roleId = userInfo.content.role_id;
  },
  mounted(){
    //学员队列表
    this.commonApi.getStudentDuiData().then(res=>{
      this.duiList = [{deptName:'全部',value:''},
                    ... res.data
                      ]
    });
    let current = new Date().getFullYear();
      let dateData = [];//获取年级
      for(let i=0;i<5;i++){
        dateData.push({
          label:(current - i)+'',
          value:(current - i)+'',
          leaf:false
        })
      }
      this.nj = [
        {label:'全部',value:''},
        ...dateData
      ];
    this.searchStudent();
  },
  methods: {
    //导出学员表
    importExcel(){
      Axios({
       method: 'get',
       url: this.$store.state.studentUrl.baseUrl+'/studentView/exportData',
       data:this.dataForm,
       headers: {'Content-Type': 'application/octet-stream' },
        responseType: 'blob'
       }).then(res => {
          fileDownload(res.data, '学员花名册.xlsx');
       });
    },
    searchStudent(){
      this.dataForm.classId = ''
      this.initList();
    },
    refreshNode(key) {
        // 获取当前节点，key可以在@node-click和:load绑定函数的回调参数node⽤变量存储后有需要刷新的地⽅取node.key
        let node = this.$refs.tree.getNode(key);
        // //  设置未进⾏懒加载状态
        node.loaded = false;
        // // 重新展开节点就会间接重新触发load达到刷新效果
        node.expand();
    },
    loadNode(node, resolve) {
      this.dataSForm = {
        auditStatus:'',//审核状态
        trainingLevelId:'',//培养层次
        studentCode:'',//学号
        studentName:'',//学员姓名
        grade:'',//年级
        studentDui:'',//学员队
        pageNo:1,
        pageSize:50
      }
      if(this.viewType == 1){
        if (node.level === 0) {
          this.node_had = node;
          this.resolve_had = resolve;
          this.initClass(resolve)
        }
        if (node.level == 1) {
          console.log(node)
            this.lastParams.trainingLevelId = node.data.value;
             this.dataForm.trainingLevelId = node.data.value;
            this.getZYinfo(resolve)
            return resolve([])
        }
        if (node.level == 2) {
          this.lastParams.specialty = node.data.value;
          this.dataForm.specialty = node.data.value;
          this.getYear(resolve)
        }
        if (node.level == 3) {
          this.lastParams.grade = node.data.value;
          this.dataForm.grade = node.data.value
          this.getLast(resolve)
          return resolve([])
        }
      }
      if(this.viewType == 2){
        if (node.level === 0) {
          this.initClass(resolve)
        }
        if (node.level == 1) {
          this.lastParams.trainingLevelId = node.data.value;
          // this.dataForm.trainingLevelId = node.data.value;
          this.getYear(resolve)
        }
        if (node.level == 2) {
            this.lastParams.grade = node.data.value;
            this.dataForm.grade = node.data.value;
            this.getZYinfo(resolve)
            return resolve([])
        }
        if (node.level == 3) {
            this.lastParams.specialty = node.data.value;
            this.dataForm.specialty = node.data.value;
            this.getLast(resolve)
            return resolve([])
        }
      }
    },
    changeView(){
      this.requestNewData()
    },
    handleNodeClick(data){
      if(data.leaf){
        this.dataForm.classId = data.value
        this.initList()
      }else{
        this.refreshNode(data.value)
        this.tableData = []
      }
    },
    requestNewData() {
      this.node_had.childNodes = []; //把存起来的node的子节点清空，不然会界面会出现重复树！
      this.loadNode(this.node_had, this.resolve_had); //再次执行懒加载的方法
    },
    //获取培养层次
    async initClass(resolve){
      let res = await getFirstLevel({code:'pylevel'});
      if(res.code == 200){
        let data = res.data.map(item=>{
          return {
            label:item.dictValue,
            value:item.id,
            leaf:false
          }
        })
        this.pycc = [{label:'全部',value:''},...data]
        resolve(data)
      }
    },
    //获取专业信息
    async getZYinfo(resolve){
      let res = await getZY(this.lastParams)
      if(res.code == 200){
        if(res.data.length>0){
          //专业
          let data = res.data.map(item=>{
            return {
              label:item.specialtyName,
              value:item.id,
              leaf:false
            }
          })
          resolve(data)
        }
      }
    },
    //添加年份
    getYear(resolve){
      let current = new Date().getFullYear();
      let dateData = [];//获取年级
      for(let i=0;i<5;i++){
        dateData.push({
          label:(current - i)+'',
          value:(current - i)+'',
          leaf:false
        })
      }
      resolve(dateData)
    },
    //最后一级
    async getLast(resolve){
      let res = await getZYBC(this.lastParams);
      if(res.code == 200 && res.data.length>0){
        let data = res.data.map(item=>{
          return{
            label:item.className,
            value:item.id,
            leaf:true
          }
        })
        resolve(data)
      }
    },
    handleSelectionChange(e){
      this.IDS = e.map(item=>item.studentCode);
    },
    //当前页
    currentPage(e){
      this.dataForm.pageNo = e;
      this.initList()
    },
    //查看个人信息
    seeInfo(row){
      this.$router.push({
        path:'/student/studentStatus/infoSearch',
        query:{
          studentCode:row.studentCode
        }
      })
    },
    //下发核对
    async xfhd(){
      //0:待审核，1.通过(免审核),2.未提交,3.下发核对=打回=不通过=3
      let params = {
        dataIdList:this.IDS,
        state:3,
      }
      if(this.IDS.length>0){
        let res =  await studentStatusAudit(params)
        if(res.code == 200){
          this.$message.success('下发成功！');
          this.initList();
        }
      }else{
        this.$message({
          message: '请选择要下发的数据！',
          type: 'warning'
        });
      }
      
    },
    //删除
     deleteInfo(studentCode){
      this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async() => {
        let res = await deleteStudent({studentCodes:studentCode})
        if(res.code == 200){
          this.$message.success('删除成功！');
          this.initList();
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        }); 
      });
    },
    async initList(){
      let res = await getStudentList(this.dataForm)
      if(res.code == 200){
        this.tableData = res.data.records;
        this.total = res.total;
      }
    },
    async initListS(){
      let res = await getStudentList(this.dataSForm)
      if(res.code == 200){
        this.tableData = res.data.records;
        this.total = res.total;
      }
    }
  },
};
</script>
<style lang="less" scoped>
/deep/.el-tree-node__label{
  width: 200px;
  overflow: hidden !important;
  white-space: nowrap !important;
  text-overflow: ellipsis !important;
  display: block !important;
}
.table-css {
 /deep/ .el-table td,.el-table th.is-leaf, .el-table--border,.el-table--group {border-color: #c7d7eb; }
 /deep/.el-table__header tr, .el-table__header th {
    padding: 0;
    height: 76px;
    background-color: #edf2f9;
    font-size: 16px;
    font-family: Microsoft YaHei;
    font-weight: bold;
    line-height: 20px;
    color: #004ca7;
  }
  /deep/.el-table__body tr,
  .el-table__body td {
    padding: 0;
    height: 86px;
  }
}
</style>

<style lang="less" scoped>
@import "../../../styles/commonCss.less";

.search-container {
  justify-content: flex-start !important;
  position: relative;
}
.wrapper-container{
  margin: 0;
  display: flex;
}
.small-btn{width: 30px;padding:5px 8px}
.right{padding-left: 20px;width: calc(100% - 295px);}
.width70{width: 70px;}
.width86{width: 100px;position: absolute;right: 0;}
.inputWidth{width: 110px;}
.right87{margin-right:10px!important}
.search-container-item {
  margin-right: 30px;
}
/deep/.el-table .ascending .sort-caret.ascending{
    border-bottom-color: #004CA7;
}
/deep/.el-table .descending .sort-caret.descending{
     border-top-color: #004CA7;
}
/deep/.el-table .sort-caret.ascending{
    border-bottom-color:rgba(0,76,167,0.5)
}
/deep/.el-table .sort-caret.descending{
    border-top-color:rgba(0,76,167,0.5)
}
.tree{
    position: relative;
    .hr{
        position: absolute;
        width: 1px;
        height: 58px;
        background: #fff;
        left: 27px;
        bottom: -17px;
    }
}

.left{
  width: 295px;
  height: calc(100vh - 95px);
  margin:-25px 0;
  padding-top: 25px;
    background: #FFFFFF;
    opacity: 1;
    // overflow-y: auto;
    overflow: scroll;
    flex-shrink: 0;
    box-sizing: border-box;
    // padding: 27px 10px 0 0px;
    border-right: 2px solid #004CA7;
    .resetSelect{
        display: flex;
        align-items: center;
        .labelName{
            font-size: 15px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 20px;
            color: #004CA7;
            width: 48px;
        }
        .el-select{
            width: 240px;
            height: 27px;
            line-height: 27px;
            /deep/.el-input__inner{
                height: 27px;
                line-height: 27px;
            }
        }
    }
}
.el-tree{
  margin-top: 36px;
    /deep/.el-tree-node__label{
        font-size: 16px;
        color:#004CA7;
    }
    /deep/.treeitem:first-child{
        font-weight: bold
    } 
    /deep/.el-tree-node__expand-icon{
                color: #004CA7;
            }
    /deep/.el-tree-node.is-current>.el-tree-node__content{
        color: #004CA7;
        background-color:#fff ;
    }
    /deep/.el-tree-node__content{
        height: 36px;
    }
    /deep/.el-tree-node__content:hover {
        background-color: #fff;
    }
    /deep/.el-tree-node{
        position: relative;
        padding-left: 16px;
    }
    /deep/.el-tree-node__children{
        padding-left: 16px;
    }
    //竖线
    /deep/.el-tree-node::before{
        content:'';
        height:100%;
        width:1px;
        position: absolute;
        left: 27px;
        top: 17px;
        // border-width: 1px;
        // border-left:1px dashed rgba(0,76,167,0.39) ;

    }
    //当前最后一个节点的竖线高度固定
    /deep/.el-tree-node:last-child::before{
        height: 36px;
        border: none;
    }
    //横线
    /deep/.el-tree-node::after{
        content:'';
        height:20px;
        width:24px;
        position: absolute;
        left: -3px;
        top: 17px;
        // border-width: 1px;
        // border-top:1px dashed rgba(0,76,167,0.39) ;
    }
    /deep/[role=treeitem]{
        // padding-bottom: 26px;
    }
    /deep/[role=treeitem]{
        /deep/.el-tree-node__label{
        font-weight: bold;}
    }
    /deep/&:last-child::before{
        border: none;
    }
    //去掉最顶层的虚线
    /deep/&>.el-tree-node::after{
        border-top: none;
    }
}
.flex{
  display: flex;
  justify-content: center;
}
.delete-red{
  color: #FA5339;
  background: #FFEFEF;
  border: 1px solid #FA5339;
}
</style>
